<template>
	<transition v-show="showFlag" class="food" v-el:food>
		<div class="food-content">
			<div class="image-header">
				<img :src="food.image" />
				<div class="icon-left" @click="handleBackClick">
					<span class="iconback iconfont">&#xe60b;</span>
				</div>
			</div>
			<div class="content">
				<div class="title">{{food.name}}</div>
				<div class="detail">
					<span class="sell-count">
						月售{{food.sellCount}}份
					</span>
					<span class="rating">
						好评率{{food.rating}}%
					</span>
				</div>
				<div class="price">
					<span class="now">￥{{food.price}}</span>
					<span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
				</div>
				<div class="cartcontrol-wrapper">
					<cartcontrol :food="food"></cartcontrol>
				</div>
				<div class="buy" 
				v-show="!food.count || food.count === 0"
				@click.stop.prevent="handleCartClick"
				>
					加入购物车
				</div>
			</div>			
			<split v-show="food.info"></split>
			<div class="info" v-show="food.info">
				<h1 class="info-title">商品信息</h1>
				<p class="info-text">{{food.info}}</p>
			</div>
			<split v-show="food.info"></split>
			<div class="rating">
				<div class="rating-title">商品评价</div>
				<ratingselect 
				 :select-type = "selectType"	
				 :only-content = "onlyContent"	
				 :desc = "desc"	
				 :ratings= "food.ratings"
				></ratingselect>
				<div class="rating-wrapper">
					<ul v-show="food.ratings && food.ratings.length">
						<li 
						v-show="needShow(rating.rateType,rating.text)"
						v-for="rating in food.ratings" 
						class="rating-item border-1px">
							<div class="user">
								<span class="username">{{rating.username}}</span>
								<img class="avatar" 
								width="12" 
								height="12" 
								:src="rating.avatar" />
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
							<p class="r-text">
								<span class="iconfont iconzan" v-if="rating.rateType === 0">&#xe614;</span>
								<span  class="iconfont iconcai" v-else>&#xe613;</span>
								{{rating.text}}
							</p>
						</li>
					</ul>
					<div class="no-rating" 
					v-show="!food.ratings || !food.ratings.length"
					>暂无评价</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import Bscroll from 'better-scroll'
	import cartcontrol from 'components/cartcontrol/cartcontrol'
	import split from '../../common/split/split.vue'
	import ratingselect from 'components/ratingselect/ratingselect'
	import transition from '../../common/transition/transition'
	import {formatDate} from '../../common/date/date'
	import Vue from 'vue'
	var POSITIVE = 0
	var NEGATIVE = 1;
	var ALL = 2;
	export default {
		props:{
			food:{
				type:Object
			}
		},
		data:function(){
			return{
				showFlag:false,
				selectType:ALL,
				onlyContent:true,
				desc:{
					all:"全部",
					positive:"推荐",
					negative:"吐槽"
				}
			}
		},
		components:{
			cartcontrol,
			split,
			ratingselect,
			transition
		},
		filters:{
			formatDate:function(time){
				var date = new Date(time)
				return formatDate(date,'yyyy-MM-dd hh:mm')
			}
		},
		created:function(){
			console.log(this.food)
		},
		events:{
			"ratingtype.select":function(type){
				this.selectType = type
				this.$nextTick(function(){
					if(this.scroll){
						this.scroll.refresh()
					}
				})				
			},
			"content.toggle":function(onlyContent){
				this.onlyContent = onlyContent
				this.$nextTick(function(){
					if(this.scroll){
						this.scroll.refresh()
					}
				})
			}
		},
		methods: {
			show:function(){
				console.log(this.food)
				this.showFlag = true;
				this.selectType = ALL;
				this.onlyContent = false;
				this.$nextTick(function(){
					if(!this.scroll){
						console.log(111)
						this.scroll  = new Bscroll(this.$els.food,{
							click:true
						})
					}else{
						this.scroll.refresh()
					}
				})
			},
			handleBackClick:function(){
				this.showFlag = false
			},
			handleCartClick:function(event){
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}
				console.log(this.food)
				Vue.set(this.food,'count',1)					
			},
			needShow:function(rateType,text){
				if(this.onlyContent && !text){
					return false
				}
				if(this.selectType == ALL){
					return true
				}else
					return rateType == this.selectType		
				}
		}
	}
</script>

<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/index.styl"
	.food {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 48px;
		right: 0;
		z-index: 30;
		width: 100%;
		background: #fff;
	}
	.image-header {
		position: relative;
		width: 100%;
		height: 0px;
		padding-bottom: 100%;
	}
	.image-header img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.icon-left {
		position: absolute;
		top: 10px;
		left: 0px;
	}
	.iconback {
		display: block;
		padding: 18px;
		font-size: 20px;
		color: #fff;
	}
	.content {
		position: relative;
		padding: 18px;		
	}
	.title {
		margin-bottom: 8px;
		line-height: 14px;
		font-size:14px;
		font-weight: 700;
		color: rgb(7,17,27);
	}
	.detail {
		height: 10px;
		margin-bottom: 18px;
		line-height: 10px;
		font-size: 0;
	}
	.sell-count,.rating {
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.sell-count {
		margin-right: 12px;
	}
	.price {
		font-weight: 700;
		line-height: 24px;		
	}
	.now {
		margin-right:8px;
		font-size: 14px;
		color: #ff0000;
	}
	.old {
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.cartcontrol-wrapper {
		position: absolute;
		right: 18px;
		bottom: 12px;
	}
	.buy {
		position: absolute;
		right: 18px;
		bottom: 18px;
		z-index: 10;
		height: 24px;
		line-height: 24px;
		padding: 0 12px;
		box-sizing: border-box;
		border-radius: 12px;
		font-size: 10px;
		color: #fff;
		background: rgb(0,160,120);
	}
	.info {
		padding: 18px;
	}
	.info-title{
		line-height: 14px;
		margin-bottom: 6px;
		font-size: 14px;
		color:rgb(7,17,27);
		
	}
	.info-text {
		padding: 0px 8px;
		line-height: 24px;
		font-size: 12px;
		color:rgb(77,85,93);
	}
	.rating {
		padding-top: 18px;
	}
	.rating-title {
		line-height: 14px;
		margin-left: 18px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.rating-wrapper {
		padding: 0 18px;		
	}
	.rating-item {
		position: relative;
		padding: 16px 0px;
		border-1px(rgba(7,17,27,0.1))
	}
	.user {
		position: absolute;
		right: 0;
		top: 16px;	
		line-height: 12px;
		font-size: 0;
	}
	.username {
		display: inline-block;
		margin-right: 6px;
		vertical-align: top;
		font-size: 10px;
		color: rgb(147,153,159);		
	}
	.avatar {
		border-radius: 50%;
	}
	.time {
		margin-bottom: 6px;
		line-height: 12px;
		font-size: 10px;
		color: rgb(147,153,159);	
	}
	.r-text {
		line-height: 16px;
		font-size: 12px;
		color: rgb(7,17,27);
	}
	.iconzan,.iconcai {		
		margin-right: 4px;
		line-height: 24px;
		font-size: 12px;
	}
	.iconzan {
		color: rgb(0,160,220);
	}
	.iconcai {
		color:rgb(147,153,159);		
	}
	.no-rating {
		padding: 16px 0px;
		font-size: 12px;
		color: rgb(147,153,159);
	}
</style>
